<template>
  <el-dialog title="风控信息详情" :visible.sync="open" width="1000px" append-to-body v-dialogDrag
             :close-on-click-modal="false" @close="closeDialog">
    <el-form ref="form" :model="form" label-width="110px" :key="formKey">
      <el-card shadow="never" :body-style="{ height: '10px' }" style="margin-bottom: 10px">
        <el-descriptions title="合同主体信息"/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投保人名称" prop="toubaoName">
              <el-input v-model="form.toubaoName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被保险人名称" prop="beibaoName">
              <el-input v-model="form.beibaoName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保险人名称" prop="baoxianId">
              <el-input v-model="form.baoxianName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经纪/代理公司名称" prop="proxyId">
              <el-input v-model="form.proxyName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="保单信息"/>
        <el-form-item label="保单号码" prop="insureNo">
          <el-input v-model="form.insureNo" placeholder="" disabled/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保险合同名称" prop="contractName">
              <el-input v-model="form.contractName" placeholder="" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="险种" prop="insureType">
              <el-select v-model="form.insureType" placeholder="险种" clearable disabled>
                <el-option
                    v-for="dict in dict.type.insure_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保单期限" prop="insureLimit">
              <el-date-picker clearable
                              disabled
                              v-model="form.insureLimit"
                              type="month"
                              style="width: 100%"
                              value-format="yyyy-MM"
                              placeholder="请选择保单期限">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保单起期" prop="insureStartDate">
              <el-date-picker clearable
                              disabled
                              v-model="form.insureStartDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              format="yyyy-MM-dd"
                              placeholder="请选择保单起期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保单止期" prop="insureEndDate">
              <el-date-picker clearable
                              v-model="form.insureEndDate"
                              type="date"
                              disabled
                              value-format="yyyy-MM-dd"
                              format="yyyy-MM-dd"
                              placeholder="请选择保单止期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保险金额" prop="insureAmount">
              <el-input v-model="form.insureAmount" placeholder="请输入保险金额" disabled>
                <template slot="append">
                  <el-button slot="append">元</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保险费率" prop="insureRate">
              <el-input v-model="form.insureRate" placeholder="请输入保险费率" disabled>
                <template slot="append">
                  <el-button slot="append">%</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保费" prop="premium">
              <el-input v-model="form.premium" disabled placeholder="保费">
                <template slot="append">
                  <el-button slot="append">元</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="风控基本信息"/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="风险可能性" prop="possibility">
              <el-select v-model="form.possibility" placeholder="请选择风险可能性" disabled>
                <el-option
                    v-for="dict in dict.type.possibility"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="风控服务计划售前" prop="front">
              <el-select v-model="form.front" placeholder="请选择风控服务计划售前" disabled>
                <el-option
                    v-for="dict in dict.type.yes_no_number"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="风控服务计划售后频率" prop="back">
              <el-select v-model="form.back" placeholder="请选择风控服务计划售后频率" disabled>
                <el-option
                    v-for="dict in dict.type.back"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标的主要类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择标的主要类型" disabled>
                <el-option
                    v-for="dict in dict.type.type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="风控报告"/>
        <el-table :data="form.reportList">
          <el-table-column label="查勘时间" align="center" prop="reportTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.reportTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="说明" align="center" prop="remark"/>
          <el-table-column label="附件" align="center" prop="remark" width="200">
            <template slot-scope="scope">
              <el-link type="primary" :href="`${baseUrl}/${scope.row.filePath}`" :underline="false" target="_blank"
                       :disabled="!scope.row.filePath">
                预览
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="风控专家信息"/>
        <el-table :data="form.expertList">
          <el-table-column label="姓名" align="center" prop="name"/>
          <el-table-column label="单位" align="center" prop="company"/>
          <el-table-column label="专业" align="center" prop="major"/>
          <el-table-column label="职称" align="center" prop="title"/>
          <el-table-column label="联系电话" align="center" prop="tel"/>
          <el-table-column label="证件附件" align="center" prop="remark" width="200">
            <template slot-scope="scope">
              <el-link type="primary" :href="`${baseUrl}/${scope.row.attachment}`" :underline="false" target="_blank"
                       :disabled="!scope.row.attachment">
                预览
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="气象数据"/>
        <file-upload v-model="form.attachment" :fileType="['pdf']" :fileSize="99999" :limit="99999" :disabled="true"/>
      </el-card>
    </el-form>
  </el-dialog>
</template>
<script>
import {
  getContractCoinsuranceList,
  getContractDetail,
  getContractPay,
  getContractPremium, getRiskDetail
} from "@/api/insurance/contract";

export default {
  name: "riskDetail",
  dicts: ['insure_type', 'possibility', 'type', 'back', 'yes_no_number'],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      formKey: Math.random() * 100,
      form: {},
      planList: [],
      planListProxy: [],
      realList: [],
      coinsuranceList: [],
      realListProxy: [],
      open: false,
    }
  },
  methods: {
    openDialog(id) {
      this.formKey = Math.random() * 100
      this.open = true
      getRiskDetail(id).then(response => {
        this.form = response.data
      })

    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    openMap() {
    },
    handleView(row) {
      window.open(this.baseUrl + "/" + row.filePath, '_blank')
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  color: #050608;
  background-color: #fff;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #050608;
  background-color: #fff;
}

::v-deep .el-descriptions {
  &:not(:nth-child(1)) {
    margin-top: 20px;
  }

  .el-descriptions__title {
    display: flex;
    align-items: center;

    &::before {
      display: inline-block;
      width: 3px;
      height: 20px;
      margin-right: 10px;
      background-color: #409eff;
      content: '';
    }
  }

  .el-descriptions-item__container {
    margin: 0 10px;

    .no-colon {
      margin: 0;

      &::after {
        content: '';
      }
    }
  }
}
</style>
